<!-- 注册 -->
<template>
  <div class="regist">
    <Header />
    <div class="register">
      <h3>认证注册</h3>
      <div class="regist_form">
        <template v-if="type == 23">
          <van-form @submit="onSubmit">
            <van-field
              v-model="phone"
              name="电话"
              label="电话"
              placeholder="请输入电话号码"
              :rules="[{ required: true, message: '请输入电话号码' }]"
            />
                        <van-field
              v-model="password"
              name="密码"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请输入密码' }]"
            />
              <van-field
              v-model="repassword"
              name="确认密码"
              label="确认密码"
              placeholder="请输入确认密码"
              :rules="[{ required: true, message: '请输入确认密码' }]"
            />
            <van-field
              v-model="name"
              type="text"
              name="真实姓名"
              label="真实姓名"
              placeholder="请输入真实姓名"
              :rules="[{ required: true, message: '请填真实姓名' }]"
            />
            <van-field name="uploader" label="上传头像">
              <template #input>
                <van-uploader
                  class="head_img"
                  v-model="fileList"
                  multiple
                  :max-count="1"
                  :after-read="afterReadHead"
                >
                  <img src="../assets/image/Component 121.png" alt="" />
                </van-uploader>
              </template>
            </van-field>
            <van-field name="uploader" label="个人简历" class="jianli">
              <template #input>
                <van-uploader
                  class="business_img"
                  v-model="fileListresume"
                  accept=".doc,.docx,.pdf"
                  :max-count="1"
                 :readonly="true"
                  :after-read="afterReadResume"
                >
                  <!-- <img src="../assets/image/Component 128.png" alt="" /> -->
                  <van-button class="colorFont" ref="colorFont" icon="plus" type="primary">上传文件</van-button>
                </van-uploader>
                <span class="font99" ref="font99">支持文件类型(doc,docx,pdf)</span>
              </template>
            </van-field>
            <van-field name="uploader" label="身份证">
              <template #input>
                <van-uploader
                  class="business_img"
                  v-model="fileListid_card"
                  multiple
                  :max-count="2"
                  :after-read="afterReadId_card"
                >
                  <img src="../assets/image/Component 128.png" alt="" />
                </van-uploader>
              </template>
            </van-field>
            <van-field name="uploader" label="学位证">
              <template #input>
                <van-uploader
                  class="business_img"
                  v-model="fileListdiploma"
                  multiple
                  :max-count="1"
                  :after-read="afterReadDiploma"
                >
                  <img src="../assets/image/Component 128.png" alt="" />
                </van-uploader>
              </template>
            </van-field>

            <van-field name="checkbox" label="复选框">
              <template #input>
                <van-checkbox v-model="checkbox" shape="square"
                  ><span @click="todetail()"
                    >(请勾选认证协议)</span
                  ></van-checkbox
                >
              </template>
            </van-field>
            <div class="sub" style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >提交审核</van-button
              >
            </div>
            <div class="login" @click="tologin()">
              <span>已有账号,去登录</span>
            </div>
          </van-form>
        </template>
        <template v-if="type == 24">
          <van-form @submit="onSubmit">
            <van-field
              v-model="phone"
              name="电话"
              label="电话"
              placeholder="请输入电话号码"
              :rules="[{ required: true, message: '请输入电话号码' }]"
            />
            <van-field
              v-model="password"
              name="密码"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请输入密码' }]"
            />
              <van-field
              v-model="repassword"
              name="确认密码"
              label="确认密码"
              placeholder="请输入确认密码"
              :rules="[{ required: true, message: '请输入确认密码' }]"
            />
            <van-field
              v-model="name"
              type="text"
              name="企业名称"
              label="企业名称"
              placeholder="请输入企业名称"
              :rules="[{ required: true, message: '请填写企业名称' }]"
            />
            <van-field name="uploader" label="上传头像">
              <template #input>
                <van-uploader
                  class="head_img"
                  v-model="fileList"
                  multiple
                  :max-count="1"
                  :after-read="afterReadHead"
                >
                  <img src="../assets/image/Component 121.png" alt="" />
                </van-uploader>
              </template>
            </van-field>
            <van-field name="uploader" label="营业执照">
              <template #input>
                <van-uploader
                  class="business_img"
                  v-model="fileLists"
                  multiple
                  :max-count="1"
                  :after-read="afterReadCompany"
                >
                  <img src="../assets/image/Component 128.png" alt="" />
                </van-uploader>
              </template>
            </van-field>
            <van-field name="checkbox" label="复选框">
              <template #input>
                <van-checkbox v-model="checkbox" shape="square"
                  ><span @click="todetail()"
                    >(请勾选认证协议)</span
                  ></van-checkbox
                >
              </template>
            </van-field>
            <div class="sub" style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >提交审核</van-button
              >
            </div>
            <div class="login" @click="tologin()">
              <span>已有账号,去登录</span>
            </div>
          </van-form>
        </template>
        <template v-if="type == 25">
          <van-form @submit="onSubmit">
            <van-field
              v-model="name"
              type="text"
              name="真实姓名"
              label="真实姓名"
              placeholder="请输入真实姓名"
              :rules="[{ required: true, message: '请填写真实姓名' }]"
            />
            <van-field
              readonly
              clickable
              label="出生日期"
              placeholder="请输入出生日期"
              :value="username4"
              @click="showPicker = true"
            />
            <van-popup v-model="showPicker" round position="bottom">
              <van-datetime-picker
                v-model="currentDate"
                type="date"
                :columns-order="['year', 'month', 'day']"
                :formatter="formatter"
                :max-date="maxDate"
                @cancel="onTimeOut"
                @confirm="onTimeIn"
                @changeFn="onShift"
              />
            </van-popup>
            <van-field name="radio" label="性别">
              <template #input>
                <van-radio-group v-model="radio" direction="horizontal">
                  <van-radio name="1">男</van-radio>
                  <van-radio name="2">女</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              v-model="home"
              type="text"
              name="籍贯"
              label="籍贯"
              placeholder="请输入籍贯"
              :rules="[{ required: true, message: '请填写籍贯' }]"
            />
            <van-field
              v-model="phone"
              name="电话"
              label="电话"
              placeholder="请输入电话号码"
              :rules="[{ required: true, message: '请输入电话号码' }]"
            />
            <van-field
              v-model="mail"
              type="text"
              name="邮箱"
              label="邮箱"
              placeholder="请输入邮箱"
              :rules="[{ required: true, message: '请填写邮箱' }]"
            />
            <van-field name="uploader" label="上传照片">
              <template #input>
                <van-uploader
                  class="head_img"
                  v-model="fileList"
                  multiple
                  :max-count="1"
                  :after-read="afterReadHead"
                >
                  <img src="../assets/image/Component 121.png" alt="" />
                </van-uploader>
              </template>
            </van-field>
            <van-field name="uploader" label="上传资质">
              <template #input>
                <van-uploader
                  class="business_img"
                  v-model="fileListvoucher"
                  multiple
                  :max-count="5"
                  :after-read="afterReadVoucher"
                >
                  <img src="../assets/image/Component 128.png" alt="" />
                </van-uploader>
              </template>
            </van-field>
            <van-field name="uploader" label="征信信息">
              <template #input>
                <van-uploader
                  class="business_img"
                  v-model="fileListcredit"
                  multiple
                  :max-count="1"
                  :after-read="afterReadCredit"
                >
                  <img src="../assets/image/Component 128.png" alt="" />
                </van-uploader>
              </template>
            </van-field>
            <van-field name="uploader" label="体检报告">
              <template #input>
                <van-uploader
                  class="business_img"
                  v-model="fileListinspect"
                  multiple
                  :max-count="1"
                  :after-read="afterReadInspect"
                >
                  <img src="../assets/image/Component 128.png" alt="" />
                </van-uploader>
              </template>
            </van-field>
            <van-field
              v-model="message"
              rows="2"
              autosize
              label="个人介绍"
              type="textarea"
              placeholder="请输入个人介绍"
            />
            <van-field name="checkbox" label="复选框">
              <template #input>
                <van-checkbox v-model="checkbox" shape="square"
                  ><span @click="todetail()"
                    >(请勾选认证协议)</span
                  ></van-checkbox
                >
              </template>
            </van-field>
            <div class="sub" style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >提交审核</van-button
              >
            </div>
            <div class="login" @click="tologin()">
              <span>已有账号,去登录</span>
            </div>
          </van-form>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPersonal,
  getCompanyQi,
  getConsultant,
  uploadFile,
} from "../api/index/index";
export default {
  data() {
    return {
      password:'',
      repassword:'',
      // 路由id
      type: "",
      // 电话
      phone: "",
      // 姓名、公司名称
      name: "",
      // 出生日期
      // 籍贯
      home: "",
      // 邮箱
      mail: "",
      // 头像/照片
      fileList: [],
      // 营业执照
      fileLists: [],
      //个人简历
      fileListresume: [],
      //身份证
      fileListid_card: [],
      // 学位证
      fileListdiploma: [],
      //资质
      fileListvoucher: [],
      //征信信息
      fileListcredit: [],
      //体检报告
      fileListinspect: [],
      // 个人介绍
      message: "",
      // 提交营业执照
      license: "",
      // 提交头像/照片
      head_pic: "",
      // 提交个人简历
      resume: "",
      // 提交身份证
      // id_card: "",
      id_card: [],
      // 提交学位证
      diploma: "",
      // 提交资质
      voucher: "",
      // 提交征信信息
      credit: "",
      //提交体检报告
      inspect: "",
      // 单选数量
      radio: 1,
      // 复选框默认不选
      checkbox: false,
      regist: {},
      //时间选择
      username4: "",
      //   隐藏或显示时间
      showPicker: false,
      regists: {},
      //   时间选择器
      maxDate: new Date(),
      currentDate: new Date(),
      changeDate: new Date(),
    };
  },
  mounted() {
    let vm = this;
    console.log(vm.$route.query);
    vm.type = vm.$route.query.id;
    vm.cons_ida = vm.$route.query.cons_ida;
    vm.cons_idb = vm.$route.query.cons_idb;
    this.timeFormat(new Date());
    console.log(vm.type);
  },
  watch: {
    $route: function () {
      location.reload();
    },
  },
  methods: {
    // 个人注册请求 getPersonal, getCompanyQi, getConsultant
    async getCompany1(data) {
      let vm = this;
      const res = await getPersonal(data);
      console.log(res, "内部");
      this.$toast(res.data.msg);
      // vm.regist = res.data;
    },
    //企业注册请求 getPersonal, getCompanyQi, getConsultant
    async getCompanyQi1(data) {
      let vm = this;
      const res = await getCompanyQi(data);
      getConsultant;
      console.log(res, "企业注册");
      this.$toast(res.data.msg);
    },
    // 咨询师注册请求 getPersonal, getCompanyQi, getConsultant
    async getConsultant1(data) {
      let vm = this;
      const res = await getConsultant(data);
      console.log(res, "咨询师注册");
      this.$toast(res.data.msg);
    },

    // 时间选择
    // 时间选择
    // 时间选择 弹框的确认按钮
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      return val;
    },
    // 取消时间弹出框按钮
    onTimeOut() {
      this.showPicker = true;
    },
    // 将时间格式转化为正常的
    onShift() {
      this.changeDate = this.currentDate; // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
    },
    // 时间弹出框  确认按钮
    onTimeIn(value) {
      this.username4 = this.timeFormat(this.currentDate);
      this.showPicker = false;
    },
    timeFormat(time) {
      // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + "-" + month + "-" + day;
    },
    // 上传头像/照片
    async afterReadHead(file) {
      let vm = this;
      let formData = new FormData();
      formData.append("file", file.file);
      // 文件上传接口
      const res = await uploadFile(formData);
      vm.head_pic = res.content;
      console.log(res, "图像上传接口");
      vm.head_pic = res.data.data.file;
      console.log(vm.head_pic);
    },
    // 上传营业执照
    async afterReadCompany(file) {
      let vm = this;
      let formData = new FormData();
      formData.append("file", file.file);
      // 文件上传接口
      const res = await uploadFile(formData);
      console.log(res, "图像上传接口");
      vm.license = res.data.data.file;
    },
    //上传个人简历
    async afterReadResume(file) {
      let vm = this;
      let formData = new FormData();
      formData.append("file", file.file);
      // 文件上传接口
      const res = await uploadFile(formData);
      console.log(res,"file")
       vm.resume = res.data.data.file;
     
    },
    //上传身份证
    async afterReadId_card(file) {
      let vm = this;
      console.log(file, "身份证");
      let formData = new FormData();
      if (file.length >= 2) {
        formData.append("file", file[0].file);
        const res = await uploadFile(formData);
        vm.id_card.push(res.data.data.file);
        console.log(res);
        formData.append("file", file[1].file);
        const res1 = await uploadFile(formData);
        vm.id_card.push(res1.data.data.file);
        console.log(res1);
      } else {
        formData.append("file", file.file);
        console.log(formData);
        // 文件上传接口
        const res = await uploadFile(formData);
        console.log(res, "图像上传接口");
        vm.id_card.push(res.data.data.file);
        console.log(vm.id_card);
      }
    },
    //上传学位证（diploma）
    async afterReadDiploma(file) {
      let vm = this;
      let formData = new FormData();
      formData.append("file", file.file);
      console.log(formData.file);
      // 文件上传接口
      const res = await uploadFile(formData);
      console.log(res, "图像上传接口");
      vm.diploma = res.data.data.file;
    },
    //上传资质
    async afterReadVoucher(file) {
      let vm = this;
      let formData = new FormData();
      formData.append("file", file.file);
      // 文件上传接口
      const res = await uploadFile(formData);
      console.log(res, "图像上传接口");
      vm.voucher = res.data.data.file;
    },
    //上传征信信息
    async afterReadCredit(file) {
      let vm = this;
      let formData = new FormData();
      formData.append("file", file.file);
      // 文件上传接口
      const res = await uploadFile(formData);
      console.log(res, "图像上传接口");
      vm.credit = res.data.data.file;
    },
    //上传体检报告
    async afterReadInspect(file) {
      let vm = this;
      let formData = new FormData();
      formData.append("file", file.file);
      // 文件上传接口
      const res = await uploadFile(formData);
      console.log(res, "图像上传接口");
      vm.inspect = res.data.data.file;
    },
    todetail() {
      this.$router.push("/deal");
    },
    // 个人认证
    tologin() {
      this.$router.push("/login?id=" + this.type);
    },
    //提交企业表单
    onSubmit(values) {
      console.log("submit", values);
      let vm = this;
      if (this.checkbox != true) {
        this.$toast({
          message: "请勾选协议",
          forbidClick: true,
        });
      } else {
        if (vm.type == 23) {
          console.log("111");
          let params = {
            phone: vm.phone,
            password:vm.password,
            repassword:vm.repassword,
            name: vm.name,
            headimage: vm.head_pic,
            resumefile: vm.resume,
            idfronimage: vm.id_card[0],
            idbackimage: vm.id_card[1],
            diplomaimage: vm.diploma,
          };
          // 个人注册请求
          vm.getCompany1(params);
        } else if (vm.type == 24) {
          console.log(vm.head_picm, "601");
          var paramsQi = {
            phone: vm.phone,
            name: vm.name,
            password:vm.password,
            repassword:vm.repassword,
            headimage: vm.head_pic,
            licenseimage: vm.license,
          };
          // 企业注册请求
          vm.getCompanyQi1(paramsQi);
        } else if (vm.type == 25) {
          let params = {
            phone: vm.phone,
            name: vm.name,
            password:vm.password,
            repassword:vm.repassword,
            // 地址栏第一个参数
            // cons_ida: vm.cons_ida,
            group_id: vm.cons_idb,
            headimage: vm.head_pic,
            sexdata: vm.radio,
            place: vm.home,
            mail: vm.mail,
            birthtime: vm.username4,
            voucherfiles: vm.voucher,
            creditfile: vm.credit,
            reportfile: vm.inspect,
            description: vm.message,
          };
          vm.getConsultant1(params);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.regist {
  .register {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
    h3 {
      font-size: 18px;
      line-height: 27px;
      color: #c4181f;
      margin-left: 16px;
      margin-top: 25px;
    }
    /deep/ .van-form {
      .van-cell {
        .van-cell__title {
          span {
            color: #a7a7a7;
            font-size: 14px;
          }
        }
      }
    }
    /deep/ .van-field__control {
      width: 185px;
      // height: 28px;
      background-color: #f5f5f5;
    }
    /deep/.van-field__control--custom {
      background-color: #fff;
    }
    .regist_form {
      width: 341px;
      border-top: 1px solid #dcdcdc;
      margin-left: 16px;
      display: flex;
      flex-wrap: nowrap;
      /deep/.van-cell::after {
        border: none;
      }

      .headimg {
        .head_name {
          width: 80px;
          margin-left: 16px;
          margin-top: 20px;
          color: #a7a7a7;
          font-size: 14px;
        }
        .head_img {
          margin-left: 110px;
          margin-top: -15px;
          width: 60px;
          img {
            display: inline-block;
          }
        }
      }
      .business {
        .business_name {
          width: 80px;
          margin-left: 16px;
          margin-top: 20px;
          color: #a7a7a7;
          font-size: 14px;
        }
        .business_img {
          margin-left: 110px;
          margin-top: -15px;
          display: flex;
          flex-wrap: nowrap;
          font-size: 12px;
          img {
            display: inline-block;
          }
        }
      }
      // /deep/.van-field__control--custom {
      //   min-height: 80px;
      // }
      /deep/.van-uploader__file{
  background-color: none !important;
}
      /deep/ .van-checkbox__label {
        color: #a7a7a7;
        font-size: 10px;
      }
      .sub {
        width: 323px;
        /deep/ .van-button {
          height: 36px;
          background: #c4181f;
          border: none;
          border-radius: 30px;
          margin-top: 100px;
        }
      }
      .login {
        width: 100px;
        margin-left: 138px;
        margin-top: 20px;
        margin-bottom: 100px;
        span {
          font-family: Source Han Sans CN;
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: 18px;
          letter-spacing: 0em;
          text-align: left;
          color: #a7a7a7;
        }
      }
    }
    /deep/.van-uploader__wrapper {
      display: flex;
      flex-wrap: nowrap;
      max-width: 70vw;
      overflow-x: scroll;
      overflow-y: hidden;
      &::-webkit-scrollbar {
        display: none;
      }
      min-width: 120px;
    }
    /deep/.van-radio__icon--checked .van-icon {
      background-color: #c4181f;
      border: none;
    }
    /deep/.van-checkbox__icon--checked .van-icon {
      background-color: #c4181f;
      border: none;
    }
    /deep/.van-checkbox__icon--checked {
      background-color: #fff;
      color: red;
    }
    // /deep/.van-radio {
    //   margin-top: -50px;
    // }
    // /deep/.van-checkbox {
    //   margin-top: -50px;
    // }
  }
}
.font99{
  
  font-size: 12px;
}
.colorFont{
  border: 0;
  background-color: #C4181F;
}

</style>